<template>
  <div class="kline-BoxMain">

    <div class="center-line">
      <div class="line-item" :style="{ 'margin-top': !item.isBuy ? -item.height - 30 + 'px' : 0 }"
        v-for="(item, index) in listData" :key="index">
        <div class="title col-green" v-if="!item.isBuy">{{ item.value }}</div>
        <div class="line" :style="{ 'height': item.height + 'px' }" :class="[item.isBuy ? 'bg-red' : 'bg-green']"></div>
        <div class="title col-red" v-if="item.isBuy">{{ -item.value }}</div>
      </div>
    </div>
    <div class="date-box">
      <div class="date-item" v-for="(item, index) in listData" :key="index">{{ item.date }}</div>
    </div>
  </div>
</template>

<script>


export default {
  name: "cylinderChart",
  data() {
    return {
      listData: [
        { date: '3-18', value: 10, isBuy: true },
        { date: '3-19', value: 30, isBuy: false },
        { date: '3-20', value: 32, isBuy: true },
        { date: '3-21', value: 11, isBuy: false },
        { date: '3-22', value: 56, isBuy: true },
      ],
      minHeight: 10
    };
  },
  mounted() {
    let arry = this.listData
    let newArry = arry.sort((a, b) => { return a.value - b.value });
    let minValue = newArry[0].value
    this.listData.map((item) => {
      this.$set(item, 'height', (item.value / minValue) * this.minHeight)
    })
  },
  props: {

  },
  computed: {},

  methods: {

  },
};
</script>
<style scoped  lang="scss">
.kline-BoxMain {
  // display: flex;
  // align-items: center;
  padding: 100px 0;
}

.center-line {
  height: 2px;
  width: 100%;
  display: flex;
  padding: 100px 0;
  justify-content: space-between;
  position: relative;

  .line-item {
    flex: 1;
    text-align: center;
    position: relative;

    .line {
      height: 50px;
      border-radius: 5px;
      width: 100px;
      margin: 0 auto;
    }

    .title {
      height: 60px;
      line-height: 60px;
      font-size: 14px;
    }
  }
}

.bg-red {
  background: #D9001B;
}

.bg-green {
  background: #2EBD85;
}

.col-red {
  color: #D9132B;
}

.col-green {
  color: #28A97A;
}

.bg-white {
  .date-box {
    display: flex;
    margin-top: 80px;

    .date-item {
      text-align: center;
      flex: 1;
      color: #000;
      font-size: 14px;
    }
  }
}
.bg-night {
  .date-box {
    display: flex;
    margin-top: 80px;

    .date-item {
      text-align: center;
      flex: 1;
      color: #fff;
      font-size: 14px;
    }
  }
}
</style>
